<template>
  <a-spin :spinning="confirmLoading">
    <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-row>
        <a-col :span="8">
          <a-form-item label="姓名" v-bind="validateInfos.realname">
            <a-input v-model:value="formData.realname" placeholder="" :disabled="true"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="员工编号" v-bind="validateInfos.workNo">
            <a-input v-model:value="formData.workNo" placeholder="" :disabled="true"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="职称" v-bind="validateInfos.technicalTitle">
            <j-dict-select-tag v-model:value="formData.technicalTitle" dictCode="technical_title"
              :show-choose-option="false" placeholder="" :disabled="true" />
          </a-form-item>
        </a-col>
      </a-row>
      <div>
        <BasicTable  @register="registerTable" :pagination="false" :dataSource="tableData" >
          <template #tableTitle>
            <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined">选择项目</a-button>
          </template>
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.dataIndex === 'itemA'" style="text-align:center">
                <a-checkbox @change="changeCheck(record,$event)" name="itemA" :key="index" v-model:checked="record.itemA"></a-checkbox>
            </template>
            <template v-if="column.dataIndex === 'itemB'" style="text-align:center">
                <a-checkbox @change="changeCheck(record,$event)" name="itemB" :key="index" v-model:checked="record.itemB"></a-checkbox>
            </template>
            <template v-if="column.dataIndex === 'itemC'" style="text-align:center">
                <a-checkbox @change="changeCheck(record,$event)" name="itemC" :key="index" v-model:checked="record.itemC"></a-checkbox>
            </template>
            <template v-if="column.dataIndex === 'itemD'" style="text-align:center">
                <a-checkbox @change="changeCheck(record,$event)" name="itemD" :key="index" v-model:checked="record.itemD"></a-checkbox>
            </template>
          </template>
          <template #action="{ index }">
            <TableAction :actions="getTableAction(index)" />
          </template>
          <template #htmlSlot="{ text }">
            <div v-html="text"></div>
          </template>
        </BasicTable>
      </div>
    </a-form>
  </a-spin>
  <LabItemsBasisModal ref="itemModal" @register="registerItemModal" @getSelectResult="onAuditOk"></LabItemsBasisModal>
</template>

<script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick } from 'vue';
import { useMessage } from '/@/hooks/web/useMessage';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import { BasicTable, TableAction } from '/@/components/Table';
import { skillList, updateSkill } from '../SysUser.api';
import { columnsB } from '../SysUser.data';
import { Form } from 'ant-design-vue';
import { useListPage } from '/@/hooks/system/useListPage';
import LabItemsBasisModal from './LabItemsBasisM.vue';
import { useModal } from '/@/components/Modal';

const formRef = ref();
const itemModal = ref();
const useForm = Form.useForm;
const emit = defineEmits(['ok']);
const formData = reactive<Record<string, any>>({
  id: '',
  realname: '',
  workNo: '',
  technicalTitle: '',
  labUserSkillList:[]
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 7 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 12 } });
const confirmLoading = ref<boolean>(false);
//表单验证
const validatorRules = {};
const { resetFields,validateInfos } = useForm(formData, validatorRules, { immediate: true });

const { tableContext } = useListPage({
  tableProps: {
    columns: columnsB,
    canResize: false,
    useSearchForm: false,
    actionColumn: {
      width: 120,
      fixed: 'right',
    },
    showIndexColumn: true,
  },
});
const [registerTable, { reload }] = tableContext;

const [registerItemModal, { openModal }] = useModal();

const tableData = ref();

/**
 * 选择项目
 */
function handleAdd() {
  openModal(true,{tableData});
  // itemModal.value.reload();
}

/**
 * 选择项目回显数据
 */
async function onAuditOk(data) {
  if (data.length > 0) {
    if(tableData.value.length>0){
      data.forEach(item=>{
        item.itemA = null;
        item.itemB = null;
        item.itemC = null;
        item.itemD = null;
        tableData.value.forEach(ele =>{
          if(ele.itemId===item.id){
            Object.assign(item,ele);
          }
        })
      })
    }
    tableData.value = data
  }
}

/**
 * 编辑
 */
 async function edit(record) {
  nextTick(() => {
    resetFields();
    //赋值
    Object.assign(formData, record);
  });
  let params = { userId: record.id };
  tableData.value = (await skillList(params)).records;
  tableData.value.forEach(item =>{
    if(item.itemA)item.itemA=Boolean(item.itemA)
    if(item.itemB)item.itemB=Boolean(item.itemB);
    if(item.itemC)item.itemC=Boolean(item.itemC);
    if(item.itemD)item.itemD=Boolean(item.itemD);
  })
}
function changeCheck(records,ele){
  if(ele.target.name==='itemA'){
    records.itemB=null;
    records.itemC=null;
    records.itemD=null;
  }else if(ele.target.name==='itemB'){
    records.itemA=null;
    records.itemC=null;
    records.itemD=null;
  }else if(ele.target.name==='itemC'){
    records.itemB=null;
    records.itemA=null;
    records.itemD=null;
  }else if(ele.target.name === 'itemD'){
    records.itemB=null;
    records.itemA=null;
    records.itemC=null;
  }
}

/**
 * 操作栏
 */
function getTableAction(index) {
  return [
    {
      label: '删除',
      color: 'error',
      onClick: handleDelete.bind(null, index),
    },
  ];
}
/**
 * 删除
 */
function handleDelete(index) {
  tableData.value.splice(index, 1);
}

/**
 * 提交数据
 */
async function submitForm() {
  formData.labUserSkillList = tableData.value; 
  formData.labUserSkillList.forEach(item =>{
    if(item.itemA!=null)item.itemA= item.itemA.toString();
    if(item.itemB!=null)item.itemB= item.itemB.toString();
    if(item.itemC!=null)item.itemC= item.itemC.toString();
    if(item.itemD!=null)item.itemD= item.itemD.toString();
  })
  console.log('formData.labUserSkillList',formData.labUserSkillList);
  await updateSkill(formData).then((res) => {
    if (res.success) {
      createMessage.success(res.message);
      emit('ok');
    } else {
      createMessage.warning(res.message);
    }
  })
  .finally(() => {
    confirmLoading.value = false;
  });
}

defineExpose({
  handleAdd,
  edit,
  submitForm,
});
</script>

<style lang="less" scoped>
.antd-modal-form {
  min-height: 500px !important;
  overflow-y: auto;
  padding: 24px 24px 24px 24px;
}

.antd-modal-divider {
  width: 2px;
  height: 16px;
  background: #009688;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
}

.hClass {
  width: 60px;
  height: 20px;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 550;
  color: #009688;
  line-height: 14px;
}

.ant-input {
  width: 200px;
  height: 32px;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #DDDDDD;
}

.ant-picker {
  width: 200px !important;
  height: 32px;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #DDDDDD;
}

:deep(.ant-form-item-control-input) {
  width: 200px !important;
}

// :deep(.ant-table-title) {
//   display: none;
// }
</style>